<template>
  <div class="app-container">
    <div class="tabletitle">
      <div>消息中心</div>
      <div>
        <el-button type="primary" @click="changeTag">一键已读</el-button>
        <span style="cursor: pointer;margin-left: 10px;  font-weight: 600;">
          <i class="iconfont iconhelp" @click="preview" style="font-size:18px"></i>
        </span>
      </div>
    </div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      style="margin-top:20px; "
    >
      <el-form-item label="消息内容" prop="projectName">
        <el-input
          v-model="queryParams.content"
          placeholder="请输入消息内容"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" :show-header="showHeader" v-loading="loading">
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column width="60">
        <template slot-scope="scope">
          <img :src="scope.row.sendUserPortrait===null?defaultAvatar:scope.row.sendUserPortrait" />
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <span>{{ scope.row.sendUserName }}</span>
          <span>{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sendTime" width="160">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.sendTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="tag" label="标签" width="80">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.status === '1' ? 'success' : 'primary'"
            disable-transitions
          >{{scope.row.statusText}}</el-tag>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- <el-dialog title="消息详情" :visible.sync="dialogVisible" width="50%" top="20vh !important">
      <el-card class="box-card">
        <div class="card-bodyinfo">
          <div class="card-labal">消息内容</div>
          <div class="card-contnet">林东东加入项目一汽大众青岛工程项目一期</div>
        </div>
        <div class="card-bodyinfo" style="margin:50px 0">
          <div class="card-labal">时间</div>
          <div class="card-contnet">2020年02月11日 12时12分</div>
        </div>
        <div class="card-bodyinfo">
          <div class="card-labal">发送人/项目</div>
          <div class="card-contnet">一汽大众青岛工程项目一期</div>
        </div>
      </el-card>
    </el-dialog>-->
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe :src="manualPreviewUrl" frameborder="0" width="100%" height="700px"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import aTitle from '@/components/Title'
import { messageList, batchRead, messageNum } from '@/api/messageList'
export default {
  name: 'MessageList',
  components: { aTitle },
  data () {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      defaultAvatar: require("@/assets/image/profile.jpg"),
      loading: true,
      total: 0,
      showHeader: false,
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        content: undefined,
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    preview () {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}首页/消息中心.xlsx`
      )}&name=${encodeURIComponent("消息中心.xlsx")}`;
    },
    getList () {
      this.loading = true;
      messageList(this.queryParams).then(res => {
        if (res.code === 200) {
          this.total = res.total
          this.tableData = res.rows.map(item => {
            if (item.sendUserPortrait === null) {
              item.sendUserPortrait = this.defaultAvatar
            } else {
              item.sendUserPortrait = process.env.VUE_APP_BASE_API + item.sendUserPortrait
            }
            if (item.status === '1') {
              item.statusText = '已读'
            } else {
              item.statusText = '未读'
            }
            return item
          })
          this.loading = false
        }

      })
    },
    reset () {
      this.queryParams.pageNum = 1
      this.queryParams.content = undefined
      this.getList()
    },
    changeTag () {
      batchRead().then(res => {
        if (res.code === 200) {
          this.msgSuccess('消息已阅')
          this.getList()
          messageNum().then(res => {
            this.$store.dispatch('message/updateNum',
              res.data.count
            )
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  width: 100%;
  .cell {
    img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    .el-tag {
      padding: 0 19px;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      letter-spacing: 0;
      text-align: center;
    }
    .el-tag--primary {
      border-color: #ff4f00;
      background: rgba(124, 110, 104, 0.1);
      color: #ff4f00;
    }

    .el-tag.el-tag--success {
      border-color: #1890ff;
      background: #fff;
      color: #1890ff;
    }
  }
}
/deep/.el-table .cell {
  display: flex;
  align-items: center;
}
.tabletitle {
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dfe6ec;
  span {
    font-family: Microsoft YaHei;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: -0.41px;
  }
  .el-button--medium {
    font-size: 12px;
    padding: 7px 13px;
  }
}

// /deep/.el-dialog__header {
//   height: 56px;
//   background-image: linear-gradient(180deg, #bed6fa 0%, #e5edf3 100%);
//   box-shadow: 0 1px 0 0 #e8e8e8;
//   padding: 16px 24px;
//   .el-dialog__title {
//     font-family: PingFangSC-Medium;
//     font-size: 16px;
//     color: rgba(0, 0, 0, 0.85);
//     letter-spacing: 0;
//     line-height: 24px;
//   }
// }

// /deep/.el-dialog__body {
//   padding: 50px 40px;
//   .el-card__body {
//     padding: 39px;
//     .card-bodyinfo {
//       font-size: 16px;
//       color: rgba(0, 0, 0, 0.65);
//       letter-spacing: 0;
//       line-height: 24px;
//       display: flex;
//       .card-labal {
//         font-family: PingFangSC-Medium;
//         width: 100px;
//         text-align: right;
//         margin-right: 48px;
//       }
//       .card-content {
//         font-family: PingFangSC-Regular;
//         flex: 1;
//       }
//     }
//   }
// }
</style>